<?php
$this->Html->addCrumb('Image Gallery', '/gallery-'.$this->layout);
$this->Html->addCrumb('Photos');
$this->Html->addCrumb('Add');
//Javascript
echo $this->Html->script(array('plugins/jquery.MultiFile'),false);
?>
<?php 
$this->Html->scriptStart(array('inline' => false));
echo '
      $(function(){
          $("#form1").ajaxForm(
          {
            url : "' . $this->Html->url(array("action"=>"uploadPhotoImages", "controller"=>"images", $this->layout=>false, $albumId)).'",
            type : "POST", //This should be set on the form element
            beforeSubmit:  function(arr, $form, options) {
              if ($("#fileList").find("div.MultiFile-label").size()===0) {
                $.TWS_Overlay("warning", "Please select at least one photo to upload!");
                return false;
              } else {
                //This has to do with the extra empty element that is added with the multiform plugin
                $.fn.MultiFile.disableEmpty(); // before submiting the form
                $.TWS_Overlay("show", "uploading photos");
              }
            },
            data : {value1 : "Additional Data that was passed"},
            dataType : "json",
            success : function(response, statusText, xhr, elem) {
              $.fn.MultiFile.reEnableEmpty();
              $("input:file").MultiFile("reset");
              //Logging the result
              //showing the images that were uploaded
              if(response && response.result) {
                var successCount = 0;
                var failCount = 0;
                $.each(response.result, function(index, value){
                  $("#logDetails").append("Image uploaded: " + value.name + " - " + (value.success ? "Success" : "Fail") + "<br/>");
                  if(value.success) { successCount++; } else { failCount++;}
                });
              
              if (failCount===0) {
                $.TWS_Overlay("success", {title :"Photo upload successful!" , message : successCount + " photo(s) were successfully uploaded. You may continue uploading photos or proceed to edit captions for the photos."});
              } else if (successCount!==0) {
                $.TWS_Overlay("warning", {title :"A problem has occurred!" , message : successCount + " photo(s) were successfully uploaded and " + failCount + " photo(s) failed to upload. Please view the logs and try again for those that were not uploaded." });
              } else {
                $.TWS_Overlay("error", {title :"Photo upload failed" , message : failCount + " photo(s) failed to upload. Please try again."});
              }
              }
            },
            error : function (response) {
              //standard ajax error
              $("#logDetails").append("<li>An error occurred when the form was submitted</li><p>"+(response.responseText || "")+"</p>");
              $.TWS_Overlay("hide");
            },
            resetForm : true,
            clearForm : true,
            iframe : true
          }
        );

        $("#showLog").toggle(function(){$(this).text("Show Log"); $("#logDetails").hide(); return false;}, function(){$(this).text("Hide Log");$("#logDetails").show(); return false;})
        $("#clearLog").click(function(){$("#logDetails").html(""); return false;});

        $("#fileUpload1").MultiFile(
          {
            list : "#fileList",
            max: '.Configure::read('App.multiplePhotoUploadLimit').',
            accept: "gif|jpg|png",
            STRING: {
              remove:"x Remove",
              selected:"Selected file: $file",
              denied:"Files of type $ext are not allowed!"
           },
           //events
            afterFileSelect: function(element, value, master_element){
            $("#fileList").focus();
            }
          });

      });
       ';
$this->Html->scriptEnd();
?>

<h1>Add Photo(s)</h1>
<p>
  <span class="bold">Category::</span> <?php echo $this->Html->link($groupInfo['Category']['name'], array('controller' => 'albums', 'action' => 'index', $this->layout=>true, $groupInfo['Category']['id']));?> &gt;&gt; <span class="bold">Album::</span> <?php echo $this->Html->link($groupInfo['Album']['name'], array('controller' => 'photos', 'action' => 'index', $this->layout=>true, $groupInfo['Album']['id']));?>
</p>
<?php echo '<div id="actionLink">'.$this->Html->link('Back to list of Photos',array('action'=>'index',$this->layout=>true, $albumId)).'</div>'; ?>

<?php echo $this->element('errors', array('errors' => isset($errors)? $errors : null)); ?>

<div>
  <p>*You may select up to <?php echo Configure::read('App.multiplePhotoUploadLimit');?> photos at a time</p>
  <form id="form1" action="#" method="post" action="" enctype="multipart/form-data">
    <label for="fileUpload1"><span class="required">*</span>Select a photo  for upload
    <input id="fileUpload1" name="fileUpload1[]" type="file"/>
    </label>
    <button id="submit1" name="submit1" class="button" style="margin-top:20px;" >Submit photos for upload</button>
  </form>

  <div id="fileList">
    <p>Files that you have selected :</p>
  </div>
  <div id="log"><p>Event Log: <a id="showLog" href="#">Hide Log</a> &nbsp;&nbsp; <a id="clearLog" href="#">Clear Log</a> </p>
    <div id="logDetails"></div>
  </div>

</div>